/*
 * MyMediaComponent.fx
 *
 * Created on 1-dec-2009, 12:50:22
 */

package javafxarnestockmans;

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.media.*;

import javafx.scene.shape.Rectangle;
import javafx.scene.text.*;
import javafx.scene.paint.Color;
import javafx.scene.Cursor;

import javafx.scene.input.*;
/**
 * @author arne
 */

public class MyMediaComponent extends CustomNode {
    
    /** X attribute of our component. */
    public var x : Integer = 0 ;
    /** Y attribute of our component. */
    public var y : Integer = 0 ;

    /** A description of the video. */
    public var vidDescription : String = "description" ;
    /** The title of the video. */
    public var vidTitle : String = "title" ;
    /** Start volume of the video. */
    public var startVolume : Number = 0.5;
    /** Do where display the meta informations on the video */
    public var showInfoBar : Boolean = true;
    /** The url of the video. */
    public var mediaURL : String = "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_2956241001_big-buck-bunny-640x360.flv" ;
    /** The Width in wich where will make the video fit. */
    public var vidWith : Integer = 384;
    /** The height in wich where will make the video fit. */
    public var vidHeight : Integer = 288 ;


    public var progress : Duration = bind mediaPlayer.currentTime;


    
    public override function create():Node{
        return Group{
            content: [mediaView,groupVidMETA, groupControlBar]
        }
    }

    var media:Media = Media{
        source: mediaURL
    };
    var mediaPlayer: MediaPlayer = MediaPlayer{
        media:media
        autoPlay:true
    };

    var mediaView : MediaView = MediaView{
        x:x
        y:y
        mediaPlayer: bind mediaPlayer
        fitHeight:vidHeight
        fitWidth:vidWith

        cursor:Cursor.HAND

        onMouseClicked: function(me: MouseEvent){
            //Only a left click play/pause the video
            if(me.button == MouseButton.PRIMARY ) {
                if(mediaPlayer.status == mediaPlayer.PAUSED){
                    mediaPlayer.play();
                }else {
                    mediaPlayer.pause();
                }
            }
        }
      };


   // TUTORIAL PART 2


   /** ###########################################
    * The Top Rectangle of description
     *   ########################################### */
    var topRDescription : Rectangle = Rectangle{
        x:x
        y:y
        width:vidWith
        height: 40
        opacity:0.5
        fill:Color.DARKGRAY
}

    var titleText: Text =  Text{
        x:topRDescription.x + 10
        y: topRDescription.y + 25
        textOrigin: TextOrigin.BOTTOM
        content: bind vidTitle
        fill:Color.ORANGE
        font: Font.font("Verdana", FontWeight.EXTRA_BOLD, 18)
}

    var descriptionText: Text =  Text{
        x:topRDescription.x + 10
        y: topRDescription.y + 35
        content: bind vidDescription
        fill:Color.WHITE
        font: Font.font("Verdana", FontWeight.MEDIUM, 10)
}

    var groupVidMETA : Group = Group{
        content: [topRDescription,titleText,descriptionText]
        cursor: Cursor.DEFAULT
        opacity: 0.0
        visible: bind showInfoBar
}


    // TUTORIAL PART 3

    /** ###########################################
    * The control bar
    *   ########################################### */

var controlBarBackGroundRect : Rectangle = Rectangle{
        x:x
        y: vidHeight + y - 40
        width:vidWith
        height: 40
        opacity:0.5
        fill:Color.DARKGRAY
    }

    var playPauseGroupWidth = 20 ;
    var pauseGroup : Group = Group{content:[]};
    var playGroup : Group = Group{content:[]};
    
    var progressNode: ProgressNode =
    ProgressNode{
        translateX:controlBarBackGroundRect.x + 10 + playPauseGroupWidth
        translateY:controlBarBackGroundRect.y + 10
        progress: bind mediaPlayer.currentTime.toMillis() / media.duration.toMillis()
        centerStr: bind "{mediaPlayer.currentTime.toString()}:{mediaPlayer.currentTime.toString()}"
        height:20
        width: vidWith - 20 - playPauseGroupWidth
        leftStr:"0:00${media.duration}"
        rightStr: bind "{media.duration.toString()}:{media.duration.toString()}"
    };


    var groupControlBar: Group = Group{
        content: [controlBarBackGroundRect,progressNode, pauseGroup, playGroup]
        cursor: Cursor.DEFAULT
        opacity: 0.0
}

}
